<template>
  <Tooltip placement="top">
    <!-- #是插槽 -->
    <template #title>
      <span>{{ t('common.importText') }}</span>
      <!-- <span>导出</span> -->
    </template>
    <!-- @click="importFn" -->
    <ImportOutlined />
  </Tooltip>
</template>
<script lang="ts" setup>
  // import { toRefs } from 'vue';
  import { Tooltip } from 'ant-design-vue';
  import { ImportOutlined } from '@ant-design/icons-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  // import * as FileSaver from 'file-saver';
  import * as XLSX from 'xlsx';
  const props = defineProps({
    tableData: {
      type: Array,
      default: () => {},
    },
    tableColumns: {
      type: Array,
      default: () => {},
    },
    excelName: {
      type: String,
      default: '整治排查进度统计表',
    },
  });
  // console.log('@tableData', props.tableData);
  const { t } = useI18n();
  function importFn() {
    exportTable();
  }
  function exportTable() {
    let content: any[] = props.tableData; //拿到后端返回的数据
    // console.log('@@@@@', content);
    let Header: any[] = props.tableColumns;
    createTable(Header, content); //调用下面的方法来制作表格
  }
  // 创建表格
  function createTable(Header, content) {
    let table = document.createElement('table'); //创建table
    let thead = document.createElement('thead'); //thead
    let tbody = document.createElement('tbody'); //thead
    let tr = document.createElement('tr'); //创建tr
    table.appendChild(thead);
    table.appendChild(tbody);
    thead.appendChild(tr);
    // 创建表头
    Header.forEach((item: any) => {
      // console.log('@000', item);
      let th = document.createElement('th');
      th.innerHTML = item.title;
      tr.appendChild(th);
    });
    // 添加内容
    content.forEach((item: any) => {
      let tr = document.createElement('tr'); //创建tr
      tbody.appendChild(tr);
      Header.forEach((item2: any) => {
        let td = document.createElement('td');
        let itemString: any = Object.entries(item);
        for (let item3 of itemString) {
          if (item2.key === item3[0]) {
            td.innerHTML = item3[1];
          }
        }
        tr.appendChild(td);
      });
    });
    //导出
    // 1.table 转 sheet 页
    let worksheet: any[] = XLSX.utils.table_to_sheet(table);
    // console.log('@worksheet', worksheet);

    // 2.新建工作簿
    let workbook: any[] = XLSX.utils.book_new();
    // console.log('@workbook', workbook);
    // 将表格内容变成文本
    let xlsxParam = { raw: false }; // 如果 想将表格数据设置为文本格式 请设为true
    workbook = XLSX.utils.table_to_book(table, xlsxParam);

    // 3.设置列宽
    let wscols: any[] = [
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
    ];
    // workbook.SheetNames[0]获取到到是文件里的到第一个表格
    worksheet['!cols'] = wscols;
    let wsrows: any[] = [{ hpx: 20 }]; // 每行固定高度px
    for (let i = 0; i <= 5; i++) {
      wsrows.push({ hpx: 20 });
    }
    worksheet['!rows'] = wsrows;
    // let xlsxParam = { raw: true }; // 将表格数据设置为文本格式
    // 4.工作簿 调用 table_to_book() 方法   把表格 和 xlsx 的参数传进去
    // workbook = XLSX.utils.table_to_book(table, xlsxParam);
    XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet');
    try {
      // 5.输出表格
      XLSX.writeFile(workbook, `${props.excelName}.xlsx`);
    } catch (e) {
      console.log(e, workbook);
    }
  }
  defineExpose({
    importFn,
  });
</script>
